<script setup lang="ts">
import { useTabManagerStore } from "@renderer/store/pinia/tabManager";
import { EnumViewMode } from "@renderer/assets/types";
import BaseIcon from "@renderer/assets/icon/BaseIcon.vue";

const tabManagerStore = useTabManagerStore();
const handleClick = (tabId) => {
    tabManagerStore.setActiveTabId(tabId);
};

const handleRemove = (tabId: string) => {
  tabManagerStore.removeTabById(tabId);
};

</script>

<template>
  <div class="flex flex-col h-full">
    <v-slide-group show-arrows>
      <v-slide-group-item
        v-for="(item,_) in tabManagerStore.tabRecords"
        :key="item.tabId"
      >
        <v-btn-group divided class="!m-[2px]">
          <v-btn
            height="30px"
            @click="handleClick(item.tabId)"
            :color="
                    item.tabId === tabManagerStore.activeTabId ? 'active' : ''
                "
          >
            <template v-if="item.tabType === EnumViewMode.quick">
              <v-icon icon="mdi-lightning-bolt" size="15"></v-icon>
            </template>
            <template v-if="item.tabType === EnumViewMode.normal">
                <base-icon size="15" name="cubeIcon"></base-icon>
            </template>
            <template v-else-if="item.tabType === 'setting'">
              <v-icon size="15" icon="mdi-menu"></v-icon>
            </template>
            <template v-else-if="item.tabType === 'tag'">
              <v-icon size="15" icon="mdi-tag-multiple"></v-icon>
            </template>
            {{item.tabLabel}}
          </v-btn>
          <v-btn
            height="30px"
            width="25px"
            min-width="25px"
            class="!pl-0"
            size="small"
            @click="handleRemove(item.tabId)"
            append-icon="mdi-close-thick"
            :color="
                    item.tabId === tabManagerStore.activeTabId ? 'active' : ''
                "
          >
          </v-btn>
        </v-btn-group>
      </v-slide-group-item>
    </v-slide-group>
  </div>
</template>

<style scoped></style>
